<template>
  <div class="channel-edit">
    <div class="myChannel">
      <van-cell>
        <div slot="title" class="title">我的频道</div>
        <!-- @click="isShowClear = !isShowClear": 点击后图标出现，再次点击图标消失 -->
        <van-button
          v-if="!isEdit"
          class="edit-btn"
          type="danger"
          plain
          round
          size="mini"
          @click="isEdit = !isEdit"
        >
          编辑
        </van-button>
        <van-button
          v-else
          class="edit-btn"
          type="danger"
          plain
          round
          size="mini"
          @click="isEdit = !isEdit"
        >
          完成
        </van-button>
      </van-cell>
      <!--  -->
      <van-grid class="my-grid" :gutter="10">
        <van-grid-item
          class="grid-item"
          v-for="(item, index) in myChannel"
          :key="index"
          @click="onClickMyChannel(item, index)"
        >
          <!-- 通过自定义插槽，控制图标显示和隐藏 -->
          <!-- fixChannels.includes(item.id) ：判断数组中是否含有频道id，取反，如果有就不能显示小图标-->
          <van-icon
            slot="icon"
            name="clear"
            v-show="isEdit && !fixChannels.includes(item.id)"
            @click="onDeleteChannel(item)"
          ></van-icon>
          <!-- v-bind: class用法         key         value
               条件绑定处理样式 :class="{ active: index === active }"
               一个对象：对象中的key表示要作用的类名
                        判断对象中value的布尔值：true表示作用到这个类名所在的元素
                                          false表示不作用在这个类名所在的元素上
           -->
          <span
            class="channel-text"
            :class="{ active: index === active }"
            slot="text"
          >
            {{ item.name }}
          </span>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="channel-groom">
      <van-cell>
        <div slot="title" class="title">频道推荐</div>
      </van-cell>
      <van-grid class="recommend-grid" :gutter="10">
        <!-- 遍历渲染推荐频道列表  遍历计算属性内的数据，直接写方法名 -->
        <van-grid-item
          class="grid-item"
          v-for="item in recommendChannels"
          :key="item.id"
          icon="plus"
          :text="item.name"
          @click="onAddChannel(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
// 引入获取所有频道模块
import { getAllChannels, addChannels, deleteChannels } from '@/api/allchannels'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
  name: 'ChannelEdit',
  // 首页 我的频道 传递的参数
  props: {
    active: {
      type: Number,
      required: true
    },
    myChannel: {
      type: Array, // 数组类型
      required: true // 必须接收到数据，否则报错
    }
  },

  data () {
    return {
      allChannels: [], // 所有频道
      isEdit: false,
      fixChannels: [0] // 固定频道，内值为频道id，不能删除或移动
    }
  },

  created () {
    this.loadAllChannels()
  },

  computed: {
    // 计算属性内获取 推荐频道列表 = 全部频道列表 - 我的频道列表
    // recommendChannels() {
    // 声明推荐频道列表
    // const rechannel = [];
    // //
    // // 遍历全部频道列表,
    // // forEach返回符合条件的元素
    // this.allChannels.forEach((allchannel) => {
    //   //  遍历我的频道列表
    //   // find: 返回第一个符合条件的元素
    //   const rec = this.myChannel.find((mychannel) => {
    //     return mychannel.id === allchannel.id;
    //   });
    //   if (!rec) {
    //     rechannel.push(rec);
    //   }
    // });
    // return rechannel;
    // },

    // 简化写法
    recommendChannels () {
      // 遍历所有频道列表  filter：数组API，获取符合条件的元素，返回一个新数组
      return this.allChannels.filter((channel) => {
        // 遍历我的频道列表  find: 数组API，获取第一个符合条件的元素，返回
        return !this.myChannel.find((mychannel) => {
          return mychannel.id === channel.id
        })
      })
    },

    // 获取vuex容器内登录状态user
    ...mapState(['user'])
  },

  methods: {
    // 加载所有频道
    async loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        console.log('data', data)
        // 将全部频道存入data中
        this.allChannels = data.data.channels
      } catch (error) {
        this.$toast('数据加载失败')
      }
    },
    // 添加推荐频道到我的频道
    // 计算属性会监听内部依赖数据，依赖的数据值发生变化时，则会重新执行计算属性，重新计算属性值
    // 因为在计算属性中已经把 我的频道 中的频道项过滤掉，所以不需要把频道从推荐列表中移除
    async onAddChannel (recommendchannel) {
      try {
        // 此步骤只是把频道添加到视图中，刷新页面后频道会消失，需要做数据持久化处理
        this.myChannel.push(recommendchannel)
        // 数据持久化
        // 登陆状态下，把数据请求接口放到线上
        // 未登录 把数据存到本地
        // 1、引入vuex，获取用户登录状态信息
        if (this.user) {
          //  已登录状态,调用添加频道接口
          await addChannels({
            id: recommendchannel.id, // 频道id
            seq: this.myChannel.length // 频道序号
          })
        } else {
          // 未登录状态，存入本地(覆盖原有存储的频道)
          // 引入本地存储模块，调用本地存储方法
          setItem('TOUTIAO_CHANNELS', this.myChannel)
        }
      } catch (error) {
        this.$toast('添加失败')
      }
    },

    // 频道编辑按钮点击事件
    // 1、编辑状态，点击频道 删除频道
    // 2、不是编辑状态，点击频道 实现首页频道导航栏跳转到对应频道
    onClickMyChannel (item, index) {
      // 我的频道处于编辑状态
      if (this.isEdit) {
        // 固定频道不能删除
        if (this.fixChannels.includes(item.id)) return
        // 把频道删除
        this.myChannel.splice(index, 1)
        // 如果删除已激活频道之前的频道，则激活频道不变
        if (index <= this.active) {
          // 子组件向父组件传参， 因为删除当前频道之前的一个频道，指向当前频道的序号减一
          this.$emit('updateActive', this.active - 1, true)
        }

        // 处理持久化
        this.onDeleteChannel(item)
      } else {
        // 不是编辑状态
        // 点击每一个频道后，把频道下标传入首页，首页频道导航处跳到相应频道，并且关闭频道管理弹出层
        // 子组件给父组件发消息
        // 参数1：事件名 用于绑定父组件的事件，从而达到相应逻辑
        // 参数2：频道序号
        // 参数3：用于父组件判断是否关闭此页面
        this.$emit('updateActive', index, false)
      }
    },

    // 删除指定频道
    async onDeleteChannel (channel) {
      try {
        // 1、引入vuex，获取用户登录状态信息
        if (this.user) {
          //  已登录状态,调用添加频道接口
          await deleteChannels(channel.id)
        } else {
          // 未登录状态，存入本地(覆盖原有存储的频道)
          // 引入本地存储模块，调用本地存储方法
          setItem('TOUTIAO_CHANNELS', this.myChannel)
        }
      } catch (error) {
        this.$toast('操作失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 顶部
.channel-edit {
  padding: 85px 0;
  .title {
    font-size: 32px;
    color: #333;
  }
  // 编辑按钮
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  // 所有频道的基础样式
  /deep/.grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      background-color: #f4f5f6;
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0;
        // 文字不换行
        white-space: nowrap;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }
  // 我的频道
  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 15px;
        color: #cacaca;
        z-index: 2;
      }
      .channel-text {
        font-size: 28px;
        white-space: nowrap;
      }
      .active {
        color: red;
      }
    }
  }
  // 频道推荐
  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        // 设置主轴方向 横向
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
        }
        .van-icon-plus {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>
